<template>
	<view>
		<headerCome @baocUNsmen="baocUNsmen"></headerCome>
		<!-- 添加uni-popup组件 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog
				type="info"
				title="相机/存储权限使用说明 "
				content="便于您使用该功能上传您的证书，请您确认授权相机/存储权限？"
				:before-close="true"
				@confirm="confirmUpload"
				@close="closePopup"
			></uni-popup-dialog>
		</uni-popup>
		
		<view class="" style="padding: 24rpx;">
			<div class="title" v-if="type==1">添加证书</div>
			<div class="title" v-if="type==2">工作经历</div>
			<view style="border-bottom: 1rpx solid #E1E4E8;">
				<view class="subtitle">
					{{type==1?'证书名称':'工作单位'}}
				</view>
				<input v-model="name" class="conMensge"  placeholder-style="color:#8F9294" placeholder="请输入名称"/>
			</view>
			<view style="border-bottom: 1rpx solid #E1E4E8;">
				<view class="subtitle">
					{{type==1?'证书图片':'工作岗位'}}
				</view>
				<view class="subcinesm">
					请上传1张证书图片
				</view>
				<view class="imgeuels" @click="showPopup">
					<view class="imgeskue" v-if="!formDataAvatar"></view>
					<image style="width: 100%;height: 100%;" :src="'https://app.zizijy.com/'+formDataAvatar" mode=""></image>
				</view>
				<view class="subtitle">
					相机/存储权限使用说明：用于简历证书上传。
				</view>
			</view>
			
			<!-- <textarea class="textarea" v-model="textareaMeValue" maxlength="100" placeholder-style="color:#8F9294" placeholder="请描述您的职业优势，最少输入10个字"/> -->
		</view>
	</view>
</template>

<script>
	import headerCome from "@/components/header-top.vue"
	import {
		Request
	} from '@/utils/request.js'
	// 引入uni-popup组件
	import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
	import uniPopupDialog from '@/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue'
	export default{
		components:{
			headerCome,
			uniPopup,
			uniPopupDialog
			
		},
		data(){
			return {
				msgType: 'info', // 添加msgType属性，用于uni-popup-dialog组件
				imgUrl:this.imgUrl,
				textareaMeValue:"",
				name:"",
				zhuanYe:"",
				endDate:'',
				endtimeMe:"",
				userinfo:{},
				formDataAvatar:"",
				date:'',
				type:1,
				xueliScone:['小学','初中','高中（职高，高技、中专）','大专','本科','硕士研究生','博士研究生'],
			}
		},
		onLoad(e) {
			this.type=e.type||1
			this.userinfo=JSON.parse(uni.getStorageSync('userinfo'));
		},
		methods:{
				// 显示头像上传提示框
				showPopup() {
					// 显示弹窗
					this.$refs.popup.open();
				},
				// 确认上传头像
				confirmUpload() {
					// 设置isConte为true，允许上传头像
					this.getImage();
					// 关闭弹窗
					this.$refs.popup.close();
				},
				// 关闭弹窗
				closePopup() {
					// 不做任何操作，只关闭弹窗
					this.$refs.popup.close();
				},
			bindDateChange(e){
				this.date=e.detail.value;
			},
			bindDateChange1(e){
				this.endtimeMe=e.detail.value;
			},
			getImage: function () {
				var _this = this
				uni.showActionSheet({
					itemList: ['拍照', '选择一张照片'],
					success: function(res) {
						_this.chooseImage(res.tapIndex)
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			chooseImage: function(index) {
				const _this = this
				// 从相册/相机选择
				// 如需直接开相机或直接选相册，请只使用一个选项
				const sourceType = index === 0 ? ['camera'] : ['album']
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: sourceType,
					success: function(res) {
						console.log(res.tempFilePaths[0])
						_this.uploadFile(res.tempFilePaths[0])
						// // TODO 真是上传照片
						// _this.setData({
						// 	imageSrc: res.tempFilePaths[0],
						// })
						// _this.loadImage();
					}
				});
			},
			uploadFile(tempFilePath){
				uni.uploadFile({
					url: 'https://app.zizijy.com/api/upload', //仅为示例，非真实的接口地址
					filePath:tempFilePath,
					name: 'file',
					formData: {
						'user': 'test'
					},
					header:{
						'Authori-zation':'Bearer '+uni.getStorageSync('token') || '',
						// 'Form-type':url=='v3/contract/buyContract'?'routine':null
					},
					success: (uploadFileRes) => {
						let {data} =JSON.parse(uploadFileRes.data);
						// this.userInfoJson.avatar=data.url;
						this.formDataAvatar=data.url;
						// this.isConte=false;
					}
				});
			},
			baocUNsmen(){
				Request('user/curriculum_vitae/certificateInformation',{
					imgurl:this.formDataAvatar,
					title:this.name,
					user_id:this.userinfo.uid,
				},"POST").then(()=>{
					uni.navigateTo({
						url:`/resume/onLine/index?type=1`
					})
				})
			}
		}
	}
</script>

<style>
	.title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 40rpx;
		color: #0D0E0F;
		text-align: left;
		font-style: normal;
		padding-bottom: 40rpx;
		text-transform: none;
	}
	.contemNems{
		width: 40%;
	}
	.contemNems .img{
		width: 24rpx;
		height: 24rpx;
	}
	.conMensge.Mens {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #8F9294;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.conMensge.Mens .uni-input{
		color: #0D0E0F;
	}
	.conMensge{
		padding: 24rpx 0;
	}
	.subtitle{
		margin-top: 24rpx;
		font-size: 28rpx;
	}
	.imgeuels{
		width: 240rpx;
		height: 240rpx;
		overflow: hidden;
		background: #F2F4F7;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.imgeuels .imgeskue{
		width: 100%;
		height: 100%;
		position: relative;
	}
	.imgeuels .imgeskue::after{
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 48rpx;
		height: 8rpx;
		background: #8F9294;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}
	.imgeuels .imgeskue::before{
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 8rpx;
		height: 48rpx;
		background: #8F9294;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}
	.subcinesm{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #8F9294;
		text-align: left;
		margin-bottom: 24rpx;
		font-style: normal;
		text-transform: none;
	}
</style>